<template>
   <CommonCard title="累计用户数" :value="numberFormat(usersTotal)">
    <div ref="barChartRef" style="width:100%;height:100%"></div>
    <template #footer>
      <div class="total-footer">
        <span>日同比</span>
        <span class="emphasis">&nbsp;{{userGrowthLastDay}}%</span>&nbsp;
        <span class="increment"></span>
        <span>&nbsp;月同比</span>
        <span class="emphasis">&nbsp;{{userGrowthLastMonth}}%</span>&nbsp;
        <span class="decrement"></span>
      </div>
    </template>
  </CommonCard>
</template>

<script lang = "ts">
import {useReportDataStore} from '@/stores/reportData'
import CommonCard from "./CommonCard.vue";
import useFormat from "@/hooks/useFormat"
import { computed } from '@vue/runtime-core';
const {numberFormat,moneyFormat} = useFormat()
import {ref,onMounted,watch} from 'vue'
import * as echarts from 'echarts'
import type {EChartsType} from 'echarts'
export default {
    name:'TotalUsers',
    components:{CommonCard}
}
</script>
<script lang="ts" setup>
  // 获取store实例
  const reportDataStore = useReportDataStore()
  // 定义页面中的标签对象
//   userGrowthLastDay:"17.70"
// userGrowthLastMonth:"47.12"
// userRank:Array[7]
// usersLastMonth:800000
// usersTotal:1177965
const usersTotal = computed(()=>reportDataStore.reportData.usersTotal)
const userGrowthLastDay=computed(()=>reportDataStore.reportData.userGrowthLastDay)
const userGrowthLastMonth=computed(()=>reportDataStore.reportData.userGrowthLastMonth)
const usersLastMonth = computed(()=>reportDataStore.reportData.usersLastMonth)
const barChartRef = ref();
let barChart: EChartsType;
const getOption=()=>{
  return{
        grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
      xAxis: {
      min: 0,
      max: 1000000,
      show: false
    },
    yAxis:{
      show: false, // 垂直那些线也不要
      data: ['一月'] ,// x轴数据列表
      // data:[usersLastMonth.value]
    },
    series: [
      {
        type: 'bar',
        // data: orderTrend.value,
        // data: [68],
        data:[usersLastMonth.value],
        barWidth: 10,
        // 显示柱条的背景颜色
        showBackground: true,
        label:{
          // 显示引导线
          show:true,
          formatter:'|',
          position:'right',
          color: 'orangered',
        }
      }
    ]
  }
}
onMounted(()=>{
  barChart = echarts.init(barChartRef.value)
  // barChart.setOption(getOption())
  // 实现响应式效果
  window.addEventListener('resize',()=>{
    barChart&&barChart.resize()
  })
})
watch(usersLastMonth,()=>{
  barChart.setOption(getOption())
})
</script>

<style lang = 'scss' scoped>
    
.total-footer{
  display: flex;
  align-items: center;
}
</style>